<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew
        :title="`${form.id ? '编辑' : '新增'}考勤周期`"
        :breadCrumb="breadCrumb"
        showBack
      ></pageHeaderNew>
    </template>
    <div class="wrap">
      <main>
        <a-form
          ref="formRef"
          :model="form"
          autoLabelWidth
          label-align="right"
          style="width: 50%; margin: 0 auto"
          :rules="rules"
        >
          <a-form-item field="name" label="周期名称" required show-colon>
            <a-input v-model="form.name" />
          </a-form-item>
          <a-form-item label="考勤周期设定" required show-colon>
            <a-radio-group v-model="form.type">
              <a-radio :value="1">自然月</a-radio>
              <a-radio :value="2">自定义</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item v-if="form.type === 2">
            <a-space>
              <a-select v-model="form.startMouth">
                <a-option :value="1">上月</a-option>
                <a-option :value="2">本月</a-option>
                <a-option :value="3">次月</a-option>
              </a-select>
              <a-select v-model="form.startDay">
                <a-option v-for="item in 31" :key="item" :value="item">
                  {{ item }}
                </a-option>
              </a-select>
              至
              <a-select v-model="form.endMouth">
                <a-option :value="1">上月</a-option>
                <a-option :value="2">本月</a-option>
                <a-option :value="3">次月</a-option>
              </a-select>
              <a-select v-model="form.endDay">
                <a-option v-for="item in 31" :key="item" :value="item">
                  {{ item }}
                </a-option>
              </a-select>
            </a-space>
          </a-form-item>
          <!-- <a-form-item label="适用范围" required show-colon>
            <a-radio-group v-model="form.range">
              <a-radio :value="1">全体员工</a-radio>
              <a-radio :value="2">部分员工</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item v-if="form.range === 2">
            <a-space style="width: 100%" direction="vertical" fill>
              <div style="display: flex; align-items: center; width: 100%">
                <div style="margin-right: 10px">适用类型：</div>
                <div style="flex: 1">
                  <a-select multiple :scrollbar="true" style="width: 100%">
                    <a-option>实习</a-option>
                    <a-option>兼职</a-option>
                    <a-option>全职</a-option>
                    <a-option>劳务派遣</a-option>
                    <a-option>退休返聘</a-option>
                    <a-option>劳务外包</a-option>
                  </a-select>
                </div>
              </div>
              <div style="display: flex; align-items: center; width: 100%">
                <div style="margin-right: 10px">适用部门：</div>
                <div style="flex: 1">
                  <a-select multiple :scrollbar="true" style="width: 100%">
                    <a-option>实习</a-option>
                    <a-option>兼职</a-option>
                    <a-option>全职</a-option>
                    <a-option>劳务派遣</a-option>
                    <a-option>退休返聘</a-option>
                    <a-option>劳务外包</a-option>
                  </a-select>
                </div>
              </div>
              <div style="display: flex; align-items: center; width: 100%">
                <div style="margin-right: 10px">适用职位：</div>
                <div style="flex: 1">
                  <a-select multiple :scrollbar="true" style="width: 100%">
                    <a-option>实习</a-option>
                    <a-option>兼职</a-option>
                    <a-option>全职</a-option>
                    <a-option>劳务派遣</a-option>
                    <a-option>退休返聘</a-option>
                    <a-option>劳务外包</a-option>
                  </a-select>
                </div>
              </div>
              <div style="display: flex; align-items: center; width: 100%">
                <div style="margin-right: 10px">适用员工：</div>
                <div style="flex: 1">
                  <a-select multiple :scrollbar="true" style="width: 100%">
                    <a-option>实习</a-option>
                    <a-option>兼职</a-option>
                    <a-option>全职</a-option>
                    <a-option>劳务派遣</a-option>
                    <a-option>退休返聘</a-option>
                    <a-option>劳务外包</a-option>
                  </a-select>
                </div>
              </div>
            </a-space>
          </a-form-item> -->
          <a-form-item label="是否启用" required show-colon>
            <a-switch
              :checked-value="1"
              :unchecked-value="2"
              v-model="form.state"
            />
          </a-form-item>
          <a-form-item label="设为默认" required show-colon>
            <a-switch
              :checked-value="1"
              :unchecked-value="2"
              v-model="form.isDefault"
            />
          </a-form-item>
        </a-form>
      </main>
      <footer>
        <a-button
          class="btn"
          style="
            margin-right: 20px;
            border: 1px rgba(242, 242, 242, 1) solid;
            background-color: #fff;
          "
          @click="$router.go(-1)"
          >返回
        </a-button>
        <a-button class="btn" type="primary" @click="save">保存</a-button>
      </footer>
    </div>
  </ContentCard>
</template>
<script setup lang="ts">
import { Message } from '@arco-design/web-vue';
import { cloneDeep } from 'lodash';
import {
  PostAttendanceCycle,
  PutAttendanceCycle,
  GetAttendanceCycleRepeat
} from '@/apis/attendance/base-setting/index';
import { useRouter } from 'vue-router';

const router = useRouter();

const breadCrumb: string[] = ['考勤', '基础设置', '打卡方式', '打卡方案'];
const formRef = ref();

const form = reactive<any>({
  type: 1,
  state: 2,
  isDefault: 2
  // startMouth: 0,
  // startDay: 0,
  // endMouth: 0,
  // endDay: 0
});

const validateName = async (val: string, cb: any) => {
  try {
    if (form.id && form.name === val) {
      return;
    } else {
      const res = await GetAttendanceCycleRepeat({
        name: val
      });
      console.log(123, res);
      if (res.code) cb(`${res.msg}`);
    }
  } catch (error: unknown) {
    console.log(error);
  }
};

const rules = {
  name: [
    {
      required: true,
      message: '请填写名称',
      trigger: "['change', 'input', 'blur']"
    },
    {
      validator: validateName
    }
  ]
};

const del = (index: number) => {
  //
};
onMounted(() => {
  Object.assign(form, JSON.parse(localStorage.getItem('attendanceCycle') + ''));
});

const getTableData = async () => {
  return [];
};

const save = async () => {
  try {
    if (await formRef.value.validate()) return;
    if (form.id) {
      await PutAttendanceCycle(form);
    } else {
      await PostAttendanceCycle(form);
    }
    router.back();
  } catch (error) {
    Message.error(`${error}`);
    console.log(error);
  }
};
onUnmounted(() => {
  localStorage.removeItem('attendanceCycle');
});
</script>
<style lang="less" scoped>
.wrap {
  main {
    margin-bottom: 60px;
    overflow: hidden;

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f2f2f2;
      margin-bottom: 20px;
    }
    header h2 {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    header h2::before {
      content: '';
      display: inline-block;
      width: 7px;
      height: 30px;
      background-color: #165dff;
      margin-right: 10px;
    }
  }
  footer {
    height: 60px;
    width: calc(100% - 100px);
    background-color: #fff;
    box-shadow: 1px -1px 10px 0 #cacaca;
    position: fixed;
    bottom: 0;
    left: 10%;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn {
      width: 120px;
      height: 40px;
      border-radius: 5px;
    }
  }
}
.stepBox {
  width: 200px;
  text-align: start;

  div:nth-child(1) {
    font-size: 16px;
    margin-bottom: 5px;
  }
}
.step-two {
  width: 100%;
}
.prompt {
  display: flex;
  div:nth-child(2) {
    margin-left: 10px;
    p:nth-child(1) {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
    }
  }
}
.custom-checkbox-card {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid var(--color-border-2);
  border-radius: 4px;
  width: 100px;
  height: 50px;
  box-sizing: border-box;
}

.custom-checkbox-card-mask {
  height: 14px;
  width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  border: 1px solid var(--color-border-2);
  box-sizing: border-box;
}

.custom-checkbox-card-mask-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.custom-checkbox-card-title {
  color: var(--color-text-1);
  font-size: 14px;
  font-weight: bold;
  // margin-bottom: 8px;
}

.custom-checkbox-card:hover,
.custom-checkbox-card-checked,
.custom-checkbox-card:hover .custom-checkbox-card-mask,
.custom-checkbox-card-checked .custom-checkbox-card-mask {
  border-color: rgb(var(--primary-6));
  display: flex;
  align-items: center;
}

.custom-checkbox-card-checked {
  background-color: var(--color-primary-light-1);
}

.custom-checkbox-card:hover .custom-checkbox-card-title,
.custom-checkbox-card-checked .custom-checkbox-card-title {
  color: rgb(var(--primary-6));
}

.custom-checkbox-card-checked .custom-checkbox-card-mask-dot {
  background-color: rgb(var(--primary-6));
}
</style>
